<!--
 * @Author: your name
 * @Date: 2021-02-20 17:34:41
 * @LastEditTime: 2021-02-23 09:07:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\wifi\bindWifi.vue
-->
<template>
    <div>
        <el-dialog
            :title="$t('devWifi.bind.title')"
            :visible="visibleEdit"
            class="el-dialog-sm"
            @close="()=>{$store.commit('setVisibleEdit',false)}" width='1000px'
            :close-on-click-modal='false'
            >
            <div style="padding-bottom:35px;">
                <div class="button-box">
                    <el-button type="primary" icon='el-icon-plus' @click="showAddModal">{{$t('add')}}</el-button>
                </div>
                <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe   :column='column' :select='false' >
                    <template #option="{data}">
                        <div class="option-box">
                            <el-button size='small' type="primary" icon="el-icon-unlock"  @click='unBind(data)'  :title='$t("devWifi.unbundling")'></el-button>
                        </div>
                    </template>
                </baseTable>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination >
            </div>
        </el-dialog>
        <addBindWifi :flowModalWifuSn='flowModalWifuSn' @uploadData='saleGetSalFlow'></addBindWifi>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTableNew'
import addBindWifi from './addBindWifi'
export default {
    components: {
        baseTable,
        addBindWifi
    },
    props: {
        flowModalWifuSn:{
            type:String,
            default:''
        },
    },
    data() {
        return {
            dataRows:[],
            column:[{
                title: this.$t('alarm.wifiSn'),
                value: 'wifiSN',
                slot: 'wifiSN'
            },
            {
                title: this.$t('sale.buyPage.salerType'),
                value: 'salerType',
                slot: 'salerType',
            },
            {
                title: this.$t('sale.buyPage.salerName'),
                value: 'salerName',
                slot: 'salerName'
            },{
                title: this.$t('salePage.tradeTime'),
                value: 'tradeTime',
                slot: 'tradeTime',
            },{
                title: this.$t('opttask.option'),
                value: 'sid',
                slot: 'option',
            }],
            loading:false,
            size:10,
            current:1,
            total:1,
        };
    },
    computed: {
        visibleEdit(){
            return this.$store.state.sysStore.visibleEdit
        }
    },
    watch: {
        flowModalWifuSn:{
            handler(nv,ov){
                if(nv){
                    this.saleGetSalFlow()
                }
            }   
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        showAddModal(){
            this.$store.commit('setNewVisible',true)
        },
        async unBind(data){
            let res = await this.API.saleDeleteEntity({
                id:data.sid
            })
            if(this.comm.showMsg(res.success)){
                this.saleGetSalFlow()
            }
        },
        handleCurrentChange(val) {
          this.current = val
          this.saleGetSalFlow()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.saleGetSalFlow()
        },
        async saleGetSalFlow(){
            this.loading = true
            let res = await this.API.saleGetSalFlow({
                wifiSN:this.flowModalWifuSn,
                size:this.size,
                current:this.current
            })
            this.total = res.total
            this.dataRows = res.rows || []
            this.loading = false
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
